<template>
  <div>
    <el-steps :active="active" finish-status="success" style="width: 98%; margin-top: 20px">
      <el-step title="基本信息"></el-step>
      <el-step title="商品相册"></el-step>
      <el-step title="上架信息"></el-step>
    </el-steps>
    <div v-show="active == 0" class="active_zero">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="产品简介">
          <el-input v-model="form.descript"></el-input>
        </el-form-item>
        <el-form-item label="类别">
          <treeselect v-model="form.category.name" :options="deptTree.data" placeholder="请选择所属部门" />
        </el-form-item>
        <div class="isisi">
          是否新品
          <el-radio v-model="form.isNew" label="1">是</el-radio>
          <el-radio v-model="form.isNew" label="2">否</el-radio>
        </div>
        <div class="isisi">
          是否热卖
          <el-radio v-model="form.isHot" label="1">是</el-radio>
          <el-radio v-model="form.isHot" label="2">否</el-radio>
        </div>
      </el-form>
    </div>
    <div v-show="active == 1">
      <div class="ProductThumbnail">
        <div>商品缩略图</div>
        <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false"
          :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
          <img v-if="form.imageUrl" :src="form.imageUrl" class="avatar FormdialogImageUrlImgAvatar" />

          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </div>
      <!-- <div>
        <span style="display: inline-block; margin-top: 40px">商品相册</span>
        <el-upload style="display: inline-block" action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
          {{ form.dialogImageUrl }}
          <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="form.dialogImageUrl" alt="" />
        </el-dialog>
      </div> -->
      <div class="ProductThumbnail">
        <div>
          <div>商品相册</div>

          <img class="FormdialogImageUrlImg" width="100%" v-for="(item,index) in form.dialogImageUrl" :key="index"
            :src="item" alt="">
          <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card"
            :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
        </div>

      </div>
    </div>
    <div v-show="active == 2">
      <el-form>
        <el-row>
          <el-col :span="24" class="Listing_information_radio">
            <el-form-item label="商品规格">
              <el-radio class="radio" v-model="form.spec" label="one">单规格</el-radio>

              <!-- <el-radio class="radio" v-model="spec" label="more" v-show="attrKeyList.length>0">多规格</el-radio> -->
            </el-form-item>
          </el-col>

          <el-col :span="24" class="Listing_information_form">
            <el-form-item label="库存">
              <el-input-number v-model="form.stock" :min="0" :max="100000"></el-input-number>
            </el-form-item>
            <el-form-item label="价格(分)">
              <el-input-number v-model="form.price" :min="0" :max="10000000"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <el-button v-show="active == 0 || active == 1" style="margin-top: 12px" @click="next" type="primary">
      下一步</el-button>
    <el-button v-show="active == 2" style="margin-top: 12px" @click="submit()" type="primary">提交</el-button>
    <el-button v-show="active == 1 || active == 2 || active == 3" style="margin-top: 12px" @click="previous">上一步
    </el-button>
  </div>
</template>
<script>
import {
  ProductEditingCategoryList,
  ProductEditingDataListInterface,
  ProductEditingSubmit
} from "@/api/ProductEditing";
export default {
  name: "ProductEditing",
  data() {
    return {
      tableData: [],
      deptTree: {
        data: []
      },
      dialogImageUrl: "",
      dialogVisible: false,
      imageUrl: "",
      active: 0,
      form: {
        name: "",
        pic: "",
        idCategory: "",
        isHot: false,
        gallery: [],
        descript: "",
        isNew: false,
        kind: "",
        spec: true,
        stock: "",
        marketingPrice: "0",
        price: "",
        id: "",
        category: {
          name: ""
        }
      },
      treeshow: false
    };
  },
  mounted() {
    let _self = this;
    _self.id = this.$route.query.id;
    _self.ProductEditingDataListInterfaceFn();
  },
  created() {
    this.treeListData();
  },

  methods: {
    //起弹窗

    EditPostDialog() {
      let _self = this;
      _self.dialogVisible = true;
    },
        //关闭弹窗
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
        //图片上传
        httprequest(par) {
      console.log(par);
      file().then((res) => {
        console.log(res);
      });
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    next() {
      this.active++;
    },
    previous() {
      this.active--;
    },
    departmentClick() {
      let _self = this;
      _self.treeshow = !_self.treeshow;
    },
    //提交btn
    submit() {
      let _self=this;
      let data={
        descript:_self.form.descript,
          detail:_self.form.detail,
          gallery:_self.form.gallery,
          id:_self.form.id,
          idCategory:_self.form.idCategory,
          isHot:_self.form.isHot,
          isNew:_self.form.isNew,
          isOnSale:_self.form.isOnSale,
          name:_self.form.name,
          price:_self.form.price,
          stock:_self.form.stock,
      }
      console.log(data);
      ProductEditingSubmit(data).then(res=>{
        console.log(res);
        _self.$router.push({
        name: "CommoditySpecification",
      });
      })

     },
    treeListData() {
      let _self = this;
      _self.listLoading = true;
      _self.tableData = [];
      let data = {
        title: _self.input
      };
      ProductEditingCategoryList(data).then(res => {
        console.log(res);
        _self.deptTree.data = res.data;
      });
    },
    // 页面初始化获取的数据
    // async ProductEditingDataListInterfaceFn() {
    //   let _self = this;
    //   let data = {
    //     id: _self.id
    //   }
    //   await ProductEditingDataListInterface(data).then(res => {
    //     console.log(res);
    //     if (res.code = 20000) {
    //       for (let item of res.data) {
    //         _self.form.push({
    //         })
    //       }
    //     }
    //   })
    // },
    // 通过商品id得到的数据
    ProductEditingDataListInterfaceFn() {
      let _self = this;
      console.log(_self.$route.query.id);
      let data = {
        id: _self.$route.query.id
      };
      ProductEditingDataListInterface(data).then(res => {
        if (data.id) {
          console.log(res);
          console.log(res.data.goods.category.name);
          let item = res.data.goods;
          // _self.form  = res.data.goods;
          _self.form = {
            category: {
              name: res.data.goods.category.name
            },
            isNew: item.isNew,
            isHot: item.isHot,
            descript: item.descript,
            name: item.name,
            stock: item.stock,
            price: item.price,
            imageUrl:
              "http://localhost:9528/dev-api/file/getImgStream?idFile=" +
              item.pic,
            dialogImageUrl: [],
            detail:_self.form.detail,
          gallery:item.gallery,
          id:item.id,
          idCategory:item.idCategory,
          isOnSale:item.isOnSale,
          };
          for (let item1 of item.gallery.split(",")) {
            _self.form.dialogImageUrl.push(
              "http://localhost:9528/dev-api/file/getImgStream?idFile=" + item1
            );
          }
          console.log(_self.form.dialogImageUrl);
          // _self.form.dialogImageUrl = item.gallery.split(",")
        }
      });
    }
  }
};
</script>
<style>
.active_zero {
  margin-left: 5%;
}

.active_zero .el-form-item .el-input {
  width: 80%;
}

.active_zero .isisi {
  font-weight: bold;
  margin-bottom: 40px;
}

.Listing_information_radio {
  margin-left: 50px;
}

.Listing_information_form .el-form-item {
  width: 300px;
  display: flex;
  align-items: center;
  justify-content: right;
}

.ProductThumbnail {
  margin-left: 50px
}

.FormdialogImageUrlImg {
  height: 146px;
  width: 146px;

}

.FormdialogImageUrlImgAvatar {
  /* margin-top:50px;
  margin-left:80px; */
  height: 145px;
  width: 145px;

}
</style>
